<template>
  <div>
    <!-- 头部 -->
    <ul class="menu_top_list book_view_top ">
      <li @click="add()"><span>返回</span></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 内容 -->
    <div class="topbefor">
      <div class="Content_Frame">
        <ul class="book_info">
          <li style=" display: flex;flex-direction: column;">
            <span class="book_newtitle" style=" flex-direction: row;text-align: left; ">{{ book.name }}</span>

            <div class="rating-container rating-gly">
              <!-- <span class="iconfont icon-aixin1 con"></span> -->
              <span class="iconfont icon-aixin1 con" v-for="item in orangeNum" :key="item"></span>
              <span class="iconfont icon-aixin1" v-for="item in num" :key="'ifo-' + item"></span>



            </div>
            <div class="book_info2">
              <span>同人</span><span>连载中</span>
            </div>
            <div class="book_info3">
              <div>{{ book.words }}</div>

              <div> 22-10-11 19:50</div>
            </div>
          </li>
          <li class="clear"><img :src="book.imc">
          </li>
        </ul>
        <div class="book_Catalog">
          <li @click="hist">

            点击阅读
          </li>
          <li>
            <router-link tag="li" :to="'./Book?id=' + book.id">目录列表</router-link>
          </li>
        </div>
      </div>
    </div>
    <div id="page">
      <div class="book_Content_style" style="border-top-width:0px;height:64.449px ;">
        <ul class="book_interact">
          <li>
            <span class="iconfont icon-aixin1" @click="like1(book)" v-show="!book.like2"></span>
            <span class="iconfont icon-aixin1" @click="like1(book)" v-show="book.like2" style="color:#EF9965"></span>

            <br>喜欢<small>&nbsp;&nbsp;{{ book.likeId }}&nbsp;&nbsp;</small>
          </li>
          <li><span v-show="!book.like1" @click="like(book)" class="iconfont icon-dianzan"></span>
            <span v-show="book.like1" @click="like(book)" style="color:#EF9965"
              class="iconfont icon-dianzan"></span><br>赞<small>&nbsp;&nbsp;&nbsp;&nbsp;{{ book.like
              }}&nbsp;&nbsp;</small>
          </li>

          <li><span class="iconfont icon--dashangxinxi"></span><br>打赏</li>
          <li><span class="iconfont icon-biaoqian"></span><br>月票<small>&nbsp; {{ book.moon }}</small></li>
          <li>
            <span class="iconfont icon-shoucang" @click="investment()"></span>
            <br>收藏
          </li>
        </ul>
      </div>

      <div class="book_Content_style1" style="margin-top:11.718px ;padding:0 11.718px ;">
        <ul class="book_profile">
          <li>作品简介</li>
          <li class="book_bk_qs1">没有什么崩坏，没有什么律者，也没有逐火十三英桀，有的只是十三位普普通通的人而已。</li>
          <li>
          </li>
        </ul>
      </div>

      <div class="book_bk_qs1" style="margin-top:11.718px ;padding:0 11.718px ;">
        <div class="book_bk_qs1" style="border-top-width:0px;">
          <ul class="book_xq_pinglun">
            <!-- <li>简评</li> -->
            <div></div>
            <li style="color:#AE5D5A;">评论</li>
            <router-link tag="li" to="/list"><span class="icon-edit icon-pinglun iconfont"
                style="vertical-align:middle;"></span> 撰写评论</router-link>
          </ul>
          <div class="book_xq_pinglun_qh" style="margin-left:0.6rem;"></div>
        </div>

        <ul id="Pinglun_body" style="margin:0.1rem;" v-for="(items, index) in pink" :key="'I-nfo-' + index">
          <li class="clear">
            <figure>
              <img :src="items.img" width="80" height="80">
            </figure>
            <div class="Pinglun_Content2">
              <span><b>{{ items.name }}</b><em></em>
                <br>{{ items.time }}</span>
            </div>
            <p>{{ items.pad }}</p>



          </li>
        </ul>




        <router-link tag="div" to="/list" class="book_pinglun_more">全部评论</router-link>

      </div>



      <div class="book_Content_style" style="margin-top:11.718px ;padding:0 11.718px ;margin-bottom:11.718px;">
        <div class="book_bk_qs1 book_Content_title" style="border-top-width:0px;">粉丝排行榜</div>
        <div class="swiper-container1">
          <div class="swiper-wrapper">

            <div class="swiper-slide swiper-slide-visible swiper-slide-active">
              <ul class="book_fans">
                <li v-for="(items, index) in ACfun" :key="'Info-' + index">&nbsp;{{ items.id }}&nbsp;&nbsp;&nbsp;
                  <figure><img :src="items.img">
                  </figure>
                  <div><span><b>{{ items.name }}</b><br>粉丝值：{{ items.funs }}</span></div>
                  <div>{{ items.frit }}</div>
                </li>

              </ul>
            </div>
          </div>
        </div>

        <div style="margin:11.718px  auto;width:140px;" id="SigninNovel" @click="setUp()"><img
            src="../assets/images/QD.png" width="140px" height="30px"></div>
      </div>


      <div class="book_bk_qs1" style="margin-top:11.718px ;overflow:hidden;">
        <div class="book_bk_qs1 book_Content_title" style="border-top-width:0px;margin:0 2.4%;">这些作品你可能也喜欢</div>
        <ul class="tuijian_list Linkfont" style="margin-top:11.718px ;">

          <li @click="changeTab(image)" v-for="(image, index) in JKL" :key="'i-fo-' + index">


            <img :src="image.imc">
            <p>{{ image.name }}</p>


          </li>>


        </ul>
      </div>

      <ul class="book_Author">
        <li><img :src="book.img" width="60" height="60"><br>{{ book.author }}</li>
        <li>
          <div><span style="color:#333;">作品集：</span><br>
            <span>黄金庭院的小日常</span><br>
            <span>上学</span><br>

          </div>

        </li>
      </ul>
    </div>


  </div>
</template>


<script>
import { getImg, getFus, getJsonData } from '@/api/home';
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      num: null,
      orangeNum: null,
      bookId: null,
      ACfun: null,
      JKL: null,
      book: {},
      pv: null,
      show: false,
      pink: null,


    }
  },


  methods: {
    // 点赞

    like(book) {
      book.like1 = !book.like1
      if (book.like1 == true) {
        book.like += 1
      } else {
        book.like -= 1
      }


    },

    hist() {
 

// 历史记录存储

      this.$store.commit("bookLookFun", this.book);

      // 跳转
      this.$router.push({
        path: `/read?id=${this.pv}`,
        method: "get",
      })

    },

    investment() {
      // console.log("this.book=>",this.book);


      // 收藏功能

      let index = this.$store.state.bookShelfList.findIndex(item => item.id == this.book.id)
      // console.log(index);
      if (index == -1) {
        this.$store.commit("bookShelfFun", this.book);

        Toast("收藏成功")
      } else {
        Toast("主人,您已经收藏过了哦~")
      }
      // console.log("this.$store.state.bookShelfList=>", this.$store.state.bookShelfList);
    },
    like1(book) {
// 点赞
      book.like2 = !book.like2
      if (book.like2 == true) {
        book.likeId += 1
      } else {
        book.likeId -= 1
      }
    },
    setUp() {
      Toast("签到成功")
      // window.localStorage.setItem('id',this.$route.query.id)
    },
    changeTab(image) {
      this.$router.push({
        path: `/BookContent?id=${image.id}`,
        method: "get",
      }); //跳转页面
    },
    add() {
// 返回跳转
      this.$router.back(-1)
      localStorage.removeItem("loglevel:webpack-dev-server");
      // console.dir(this);
      // console.log(1);
    },
    getImgFun() {

      // 获取json数据
      getImg({ id: this.$route.query.id }).then(data => {
        // console.log(data); 
        var pav = this.$route.query.id;
        var ace = Math.ceil(pav * 3) - 2
        this.pv = ace
        let arr = data.sfAll;
        // console.log(arr);
        let index = arr.findIndex(item => item.id == this.$route.query.id);
        var obj = arr.splice(index, 1);
        // console.log(obj);

        this.num = obj[0].num
        this.orangeNum = obj[0].orangeNum
        this.book = obj[0]
        // console.log(this.book);
        // console.log("pv=>",this.pv);
      })


    }



  },

 // 获取json数据
  created() {
    // this. changeTab()
    //  粉丝榜
    getFus().then(fun => {
      // console.log(fun.fun);
      this.ACfun = fun.fun;
      this.pink = fun.pink


    })
    getJsonData().then(data => {

      this.JKL = data.nba


    });

    // 获取id
    // console.log( this.$route.query);
    if ("id" in this.$route.query) {
      this.getImgFun();
    }
  },
  watch: {
    // '$route': function (to, from) {
    //     this.changeTab()
    // }
    $route() {
      location.reload();

    },
  },

  beforeRouteLeave(to, from, next) {
    if (to.name === "BookContent") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "read") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "home") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "Book") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "history") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "new") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "seru") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    if (to.name === "search") {
      this.$store.commit("newCachePath", to.path.split("/"));
      console.log(this.$store.state.cachePath);

    }
    next();
  },
}
</script>
<style lang="scss">
.book_Content_style1 {
    border-width: 0.02667rem 0;
    color: #999;
    background: #FFF;
}
#Pinglun_body li {
  background: url(//rs.sfacg.com/web/m/images/xx.gif) repeat-x bottom;
  background-size: 2px;
}

.topbefor {
  margin-top: 46.8px;
}

.book_pinglun_more {
  font-size: 14.062px;
  color: #999;
  background: #f1f1f1;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  height: 35.154px;
  border-radius: 18.749px;
  margin: 23.436px auto;
  width: 175.77px;
}

figure img {
  width: 35.154px;
  height: 35.154px;
}

.swiper-container1 {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  float: left;
  width: 100%;
}

.book_fans li span {
  line-height: 17.577px;
  color: #999;
}

.book_fans li span B {
  font-weight: normal;
  color: #333;
}

.book_fans li div:last-child {
  text-align: right;
  color: #F60;
}

.book_fans li {
  color: #666;
  font-size: 11.718px;
  overflow: hidden;
  padding: 11.718px 0;
  display: -webkit-box;
  -webkit-box-align: center;
}

.tuijian_list {
  font-size: 0;
}

.Linkfont a {
  color: #666;
  text-decoration: none;
  font-size: 11.718px;
}

.tuijian_list li {
  display: inline-block;
  width: 22%;
  margin-left: 2.4%;
  text-align: center;
  vertical-align: top;
}

.tuijian_list li img {
  margin-bottom: 2.344px;
  width: 100%;
}

.fengtui_list {
  font-size: 0;
}

.fengtui_list li {
  display: inline-block;
  width: 30.1%;
  margin-left: 2.4%;
  text-align: center;
  vertical-align: top;
}

.fengtui_list li img {
  margin-bottom: 2.344px;
  width: 100%;
}

.book_xq_pinglun {
  li {
    width: 70.308px;
    color: #333;
    font-size: 14.062px;
    height: 35.154px;
    line-height: 35.154px;

    &:last-child {
      -webkit-box-flex: 1;
      text-align: right;
      color: #999;
    }
  }
}

.book_fans {
  li {
    div {
      -webkit-box-flex: 1;
      text-align: left;
    }
  }
}

.book_Author {

  padding: 0 11.718px;
  font-size: 12.89px;

  li {
    &:first-child {
      text-align: center;
    }

    &:nth-child(2) {
      color: #666;
      margin-top: 4.687px;
      line-height: 1.5em;
    }

    &:last-child {
      div {
        &:first-child {
          color: #666;
          margin-top: 17.577px;
          line-height: 2em;
          -webkit-box-flex: 1;
        }
      }
    }
  }

  img {
    border-radius: 50%;
    margin: 17.577px 0 2.344px 0;
  }
}

.book_xq_pinglun {
  display: -webkit-box;
  -webkit-box-align: center;
  text-align: center;
}

.book_Content_style {
  border-width: 1px 0px;
  color: #999;
  background: #FFF;
}

.book_interact {
  display: -webkit-box;

  li {
    border-style: solid;
    -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    text-align: center;
    width: 0%;
    margin-top: 12.89px;
    font-size: 14.062px;
    height: 39.841px;
    line-height: 1.5em;
    border-width: 0 1px 0 0;
    color: #999;
  }
}

.book_profile {
  li {
    &:first-child {
      color: #333;
      font-size: 14.062px;
      height: 35.154px;
      line-height: 35.154px;
    }

    &:nth-child(2) {
      color: #666;
      font-size: 11.718px;
      line-height: 1.8em;
      padding: 5.859px 0;
      text-align: left;
    }

    &:last-child {
      padding: 9.374px 0 3.515px 0;
      overflow: hidden;
    }
  }
}


.book_Catalog {
  display: -webkit-box;
  margin-top: 17.577px;

  li {
    font-size: 15.233px;
    height: 32.81px;
    border-radius: 18px;
    -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    margin-right: 23.436px;
    color: #fff;
    background: #eb7c3a;

    &:last-child {
      margin-right: 0px;
    }
  }
}


.book_info2 {
  display: -webkit-box;
  margin-bottom: 0.05rem;

  span {
    font-size: 9.374px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background-color: rgba(255, 255, 255, 0.4);
    height: 15.233px;
    padding: 0px 9.374px;
    margin-right: 11.718px;
    border-radius: 7.617px;
  }
}

.book_info3 {
  text-align: left;
  font-size: 9.374px;
  line-height: 2em;
}

.book_info {
  li {
    &:last-child {
      // text-align: right;

      width: 119.524px;
    }

    img {
      float: right;
      width: 107.806px;
      height: 134.757px;
    }
  }
}


.rating-gly {
  margin: 11.718px 0;
  text-align: left;

  span {
    font-size: 11.718px;
    margin-right: 2px;
    width: 12px;
    color: #E3E3E3;

    &.con {
      color: #FBDC04;
    }
  }

}

li {
  list-style-type: none;
}

#page {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.Content_Frame {
  overflow: hidden;
  padding: 13.718px;
  background: #EF9965;
  color: #FFF;

  li {
    -webkit-box-flex: 1;

    .book_newtitle {
      font-size: 18px;
    }
  }

}

.book_info {
  display: -webkit-box;
  height: 134.757px;
}

ul {
  padding: 0px;
  margin: 0;
  BORDER: medium none;
  list-style-type: none;
  text-overflow: ellipsis;
}

.menu_top_list {
  height: 46.872px;
  width: 100%;
  background-color: #ef9965;
  color: #fff;
  font-size: 18px;

  li {
    float: left;
    display: -webkit-box;
    -webkit-box-align: center;
    height: 46.872px;

    &:first-child {
      width: 18%;

      &::before {
        background: url("../assets/images/登录.png") no-repeat -49.216px 9.96px;
        background-size: 105.462px;
        content: "";
        height: 46.872px;
        width: 24.608px;
        display: block;
      }
    }

    &+li {
      width: 64%;
      -webkit-box-pack: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &:last-child {
      width: 18%;
    }
  }

  a {
    color: #fff;
  }
}
</style>